import React, { Component } from 'react';
// import { Scroller, Touchable } from '$yo-component';
import { List, Scroller } from '$yo-component';
import { loading } from 'yo3/component/loading';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import './index.scss';

class DetailPage extends Component {
	componentWillMount(){
		loading.show({
		    extraClass: 'yo-loading-b',
		    text: 'loading'
		});
	};
	componentDidMount(){
		setTimeout(function(){loading.hide()},1000)
	}
    render() {

        return (
	        <div className="yo-flex ani">	
	        	 <Header title="个人简历" left={false}/>
	        	 <Scroller extraClass="flex">
	        	
		         <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502451710804&di=458c2808859a6944c5f59121012c1158&imgtype=0&src=http%3A%2F%2Fupload.chinaz.com%2F2016%2F0804%2F6360593029226446718695310.png" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">HTML5</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		         <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502478940179&di=214093f941900be69f82030334655b3a&imgtype=0&src=http%3A%2F%2Fa1.jikexueyuan.com%2Fhome%2F201505%2F27%2F2dad%2F55651933a6254.jpg" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">CSS3</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		         <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502479492209&di=00e2be11ac5f841bb9c848a767885a3a&imgtype=0&src=http%3A%2F%2Fimg12.360buyimg.com%2Fn12%2Fjfs%2Ft484%2F201%2F595212189%2F304847%2Fd4a58739%2F5475a715N86a52100.jpg%2521q70.jpg" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">原生JAVASCRIPT</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		         <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502479349244&di=ad9e32b3a2a610ea848ef29dd047620d&imgtype=0&src=http%3A%2F%2Flzw.me%2Fwp-content%2Fuploads%2F2015%2F09%2Flearn_babel.png" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">ES5</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		         <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502479509653&di=0acd551dfe3cbc96f6ccc944be258c3a&imgtype=0&src=http%3A%2F%2Fi0.wp.com%2Fqnimate.com%2Fwp-content%2Fuploads%2F2015%2F02%2Fecmascript-6.jpg%3Ffit%3D679%252C9999" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">ES6</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		          <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502479832992&di=f537751c832d70a39850c906bc8945bd&imgtype=0&src=http%3A%2F%2Fwww.51wendang.com%2Fpic%2Fcb3f043f8502a102c46990eb%2F1-810-jpg_6-1080-0-0-1080.jpg" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">JQUERY</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		          <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502480052219&di=d1e4495cab1af75267ebd44b7b2873eb&imgtype=0&src=http%3A%2F%2Fwww.igooda.cn%2Fuploads%2Fallimg%2F161027%2F14460424b-0.JPG" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">AJAX</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		          <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502510792509&di=fdfac21d272a10753683732f0707b3c9&imgtype=0&src=http%3A%2F%2Fimg.mukewang.com%2F561dfda500011a4325001408-590-330.jpg" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">JSON</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>
		          <div className="yo-list yo-list-group">
			         <a href="#" className="item">
				         <Scroller.LazyImage src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502510247904&di=dc97015bbeccc3cc15c8b9d36dd81242&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fdoc%2Fpic%2Fitem%2Fd53f8794a4c27d1e8b657e4212d5ad6edcc438f0.jpg" alt="美女"/>
				         <div className="flex">
					         <h3 className="title">JSONP</h3>
					         <p className="detail">对比HTML4，HTML5更专注于内容与结构，而不专注表现..</p>
				         </div>
				         
			         </a>
		         </div>

		         </Scroller>
		         <Footer></Footer>
	         </div>
        )
    }
}



export default DetailPage;
